<template>
  <!-- <li class="todo-item">
    {{item.id}} - {{item.title}} - {{item.completed}} -
     <button>修改</button>
     <button @click= 'handleRemove'>删除</button>
  </li> -->
<div class="card">
  <div class="card-content">
    <div class="content">
      {{item.title}}<br>
      完成状态：{{item.completed}}
    </div>
  </div>
  <footer class="card-footer">
    <a href="#" class="card-footer-item" @click.prevent="handleModify">Edit</a>
    <a href="#" class="card-footer-item" @click.prevent='handleRemove'>Delete</a>
  </footer>
</div>
</template>

<script>
export default {
  name: 'TodoItem',
  // props: ['item'] // 声明在当前组件中可以接收的属性的名称
  props: { // 属性验证
    item: {
      type: Object, // 规定该属性的类型
      required: true // 规定该属性为必传值
      /* default () { // 规定未传该属性是的默认返回值
        return { }
      } */
    }
  },
  methods: {
    handleRemove () {
      console.log('删除')
      // 触发在父组件中绑定的事件，传递待删除的id
      // this.$emit('remove', this.item.id)
      this.$bus.$emit('remove', this.item.id)
    },
    handleModify () {
      this.$bus.$emit('modify', this.item.id)
    }
  }
}
</script>

<style lang="scss">

</style>
